<template>
  <div id="main3" style="height: 500px"></div>
</template>

<script lang="ts" setup>
//第一种选择是 子组件请求数据 子组件渲染
//第二种选择 父组件请求 传来数据给子组件渲染
import * as echarts from "echarts"; //引入echarts
import { onMounted, watch, ref } from "vue";
let myChart = ref<any>();
let props = defineProps(["lineList"]);
const desc: any = {
  "1": "待审批",
  "2": "已同意",
  "0": "已拒绝",
};
watch(props, (newValue) => {
  let dataX: any = []; //
  let dataY: any = [];
  newValue.lineList.forEach((item: any) => {
    dataX.push(desc[item["_id"]]);
    dataY.push(item["count"]);
  });
  myChart.value.setOption({
    title: {
      text: "请假审批分析",
    },
    tooltip: {},
    xAxis: {
      data: dataX,
    },
    yAxis: {},
    series: [
      {
        name: "次数",
        type: "line",
        data: dataY,
      },
    ],
  });
});

onMounted(() => {
  myChart.value = echarts.init(document.getElementById("main3") as HTMLElement);
});
</script>
